.control-threshold {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba($dark,0.5);
  z-index: 100;
  &.fixed{
    position: fixed;
    z-index: 1000;
  }
  .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
  }
}

.content-threshold{
  width: 300px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  background: $white;
  @include transform(translate(-50%,-50%));
  header{
    text-align: center;
    font-size: 13px;
    @include clearfix();
    h2{
      font-size: 21px;
      padding: 0 0 10px;
      text-align: center;
    }
    p{
      button{
        margin: 7px auto 0;
        display: block;
      }
      .source{
        @extend .info-icon;
        display: inline-block;
        top: 2px;
        position: relative;
      }
    }
    ol{
      text-align: left;
      list-style-type: decimal;
      list-style-position: outside;
      position: relative;
      float: left;
      max-width: 80%;
      left: 50%;
      @include transform(translate(-50%,0));
      li{
        padding: 5px 0 0;
        &:first-child{ margin: 0;}
        .source{
          @extend .info-icon;
          display: inline-block;
          top: 2px;
          position: relative;
        }
      }
    }
  }
  // CLOSE BUTTON
  .close {
    display: block;
    position: absolute;
    top: 0px; right: 0px;
    width: 40px;
    height: 40px;
    z-index: 20;
    svg{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      height: 50%;
      fill: $dark;
      @include transform(translate(-50%,-50%));
    }
    &:hover{
      svg{
        fill: darken($dark,10%);
      }
    }
  }

  .trees {
    width: 100%;
    margin: 40px 0 20px;
    height: 60px;

    .tree-icon {
      width: 25px;
      height: 41px;
      margin-top: 19px;
      float: left;
      background: image-url('backgrounds/map_options_tree-1.png') no-repeat;
    }

    .forest-icon {
      float: right;
      width: 91px;
      height: 60px;
      background: image-url('backgrounds/map_options_tree-2.png') no-repeat;
    }
  }




  .slider-container{
    width: 100%;
    ul{
      width: calc(75% - 12px);
      height: 11px;
      position: relative;
      margin: 0 auto 3px;
      &:before,
      &:after{
        position: absolute;
        top: 0;
        text-align: center;
        color: $cGreen;
        font-weight: 500;
        font-size: 10px;
      }
      &:before{
        content: "0%";
        right: 112.5%;
      }
      &:after{
        content: "100%";
        left: 112.5%;
      }
      li{
        position: absolute;
        text-align: center;
        color: $cGreen;
        font-size: 10px;
        font-weight: 500;
        cursor: pointer;
        @include transform(translate(-50%,0));
        &:hover{
          color: darken($cGreen, 5%);
        }
        @for $i from 0 through 6 {
          &:nth-child(#{$i + 1}){
            left: $i * 16.666666%;
          }
        }
      }
    }
    .range-box{
      position: relative;
      height: 10px;
      width: 75%;
      margin: 0 auto;
      .dots{
        position: absolute;
        width: 125%;
        height: 100%;
        top: 0;
        left: 50%;
        @include transform(translate(-50%,0));
        margin: 1px 0 0;
        background: image-url('/assets/icons/point.png') repeat-x 1px center;
        &:after{
          content: "";
          position: absolute;
          top: 50%;
          right: 0;
          width: 12.5%;
          height: 4px;
          margin: -2px 0 0;
          cursor: pointer;
          background: $cGreen;
          border-radius: 2px;
        }
      }
      .progress{
        position: absolute;
        top: 50%;
        right: 0;
        width: percentage(1 - 1/6*4);
        height: 4px;
        margin: -1px 0 0;
        cursor: pointer;
        background: $cGreen;
        border-radius: 2px;
      }
    }



    // RANGE INPUT
    input[type=range] {
      -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
      width: 100%; /* Specific width is required for Firefox. */
      margin: 0;
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
    }

    input[type=range]:focus {
      outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
    }

    input[type=range]::-ms-track {
      width: 100%;
      cursor: pointer;
      background: transparent; /* Hides the slider so custom styles can be added */
      border-color: transparent;
      color: transparent;
    }






    // THUMB
    /* Special styling for WebKit/Blink */
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      position: relative;
      height: 12px;
      width: 12px;
      margin: -3px 0 0 0;
      border-radius: 2px;
      background: $white;
      cursor: pointer;
      box-shadow: $shadow1;
      &:after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%,-50%));
        width: 4px;
        height: 4px;
        background: $dark;
        border-radius: 50%;
      }
    }

    /* All the same stuff for Firefox */
    input[type=range]::-moz-range-thumb {
      position: relative;
      height: 12px;
      width: 12px;
      margin: -4px 0 0 0;
      border-radius: 2px;
      background: $white;
      cursor: pointer;
      box-shadow: $shadow1;
      &:after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%,-50%));
        width: 4px;
        height: 4px;
        background: $dark;
        border-radius: 50%;
      }
    }

    /* All the same stuff for IE */
    input[type=range]::-ms-thumb {
      position: relative;
      height: 12px;
      width: 12px;
      margin: -4px 0 0 0;
      border-radius: 2px;
      background: $white;
      cursor: pointer;
      box-shadow: $shadow1;
      &:after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%,-50%));
        width: 4px;
        height: 4px;
        background: $dark;
        border-radius: 50%;
      }
    }








    //TRACK
    input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 10px;
      cursor: pointer;
      background: transparent;
      position: relative;
      z-index: 5;
    }

    input[type=range]:focus::-webkit-slider-runnable-track {
      background: transparent;
    }

    input[type=range]::-moz-range-track {
      width: 100%;
      height: 10px;
      cursor: pointer;
      background: transparent;
      position: relative;
      z-index: 5;
    }

    input[type=range]::-ms-track {
      width: 100%;
      height: 10px;
      cursor: pointer;
      background: transparent;
      position: relative;
      z-index: 5;
    }


    input[type=range]::-ms-fill-lower {
      background: #2a6495;
      border: 0.2px solid #010101;
      border-radius: 2.6px;
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    input[type=range]:focus::-ms-fill-lower {
      background: #3071a9;
    }

    input[type=range]::-ms-fill-upper {
      background: #3071a9;
      border: 0.2px solid #010101;
      border-radius: 2.6px;
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    input[type=range]:focus::-ms-fill-upper {
      background: #367ebd;
    }

  }
}
